<template>
  <div :class="$style.answer">
    <Icon :allow="allow" :class="{'alert': agentState.alert && !isCallOut}" :src="src" :orange="agentState.talk" :srcset="srcset" :text="text" @on-click="iconClickHandle" />
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import dyn from './js/dyn.js'
import { mapGetters } from 'vuex'
export default {
  name: 'Answer',
  components: {
    Icon
  },

  data() {
    return {}
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo', 'isCallOut']),
    src() {
      let src = beforeSign.reply
      if (this.sign && this.alert && !this.isCallOut) {
        src = afterSign.reply
      }
      if (this.sign && this.talk) {
        src = dyn.reply
      }
      return src
    },
    srcset() {
      let src = beforeSign.reply2x
      if (this.sign && this.alert && !this.isCallOut) {
        src = afterSign.reply2x
      }
      if (this.sign && this.talk) {
        src = dyn.reply2x
      }
      return src
    },
    text() {
      return this.agentState.talk ? '应答中' : '应答'
    },
    allow() {
      const { sign, alert } = this.agentState
      return sign && alert
    },
    sign() {
      return this.agentState.sign
    },
    alert() {
      return this.agentState.alert
    },
    talk() {
      return this.agentState.talk
    }
  },
  created() {},
  methods: {
    // 话务条被单击
    iconClickHandle() {
      if (this.allow) {
        this.$cps.answer().then(() => {
          this.$store.commit('SET_AGENT_STATE', { key: 'alert', value: false })
        })
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";

.answer {
  .alert{
    animation-iteration-count: infinite;
  }
}
.btn{
  @include flex($justify: flex-end);
}
</style>
<style lang="scss">
@keyframes alert {
  0%{
    transform: scale(1.2);
  }
  25%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.8);
  }
  75%{
    transform: scale(0.4);
  }
  100%{
    transform: scale(0.2);
  }
}
.alert {
  &>img{
    animation-name: alert;
    animation-iteration-count: infinite;
    animation-duration: 0.5s;
  }
}
</style>
